@section TitleContent
{
    Posts
}

<div class="widget green">
    <div class="widget-title">
        <h4><i class="icon-reorder"></i> Blog Posts</h4>
    </div>
    <div class="widget-body">
        <button class="btn btn-danger" id="DeleteAllButton"><i class="icon-remove icon-white"></i> Delete all selected</button>
        <a class="btn btn-warning" href="@Url.Action("Edit","Blog", new { area = "CleverCms.Admin" })"><i class="icon-plus icon-white"></i> Create Post</a>
        <a class="btn btn-warning" href="@Url.Action("EditCategory","Blog", new { area = "CleverCms.Admin" })"><i class="icon-plus icon-white"></i> Create Category</a>
        <div id="CategoriesTableContainer">
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#CategoriesTableContainer').jtable({
            paging: true,
            pageSize: 20,
            sorting: true,
            redirect: false,
            defaultSorting: 'Name ASC',
            selecting: true,
            multiselect: true,
            selectingCheckboxes: true,
            selectOnRowClick: false,
            gotoPageArea: 'none',
            pageSizeChangeArea: false,
            actions: {
                listAction:   '@Url.Action("ListCategories")',
                deleteAction: '@Url.Action("DeleteCategory")',
                createAction: '@Url.Action("UpdateCategory")'
            },
            fields: {
                Id:
                {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },

                pages:
                {
                    title: '',
                    width: '5%',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (categoryData) {
                        var $img = $('<img class="child-opener-image" src="@Url.Content("~/Areas/CleverCms.Admin/Scripts/jtable/themes/metro/open.png")" title="Edit phone numbers" />');
                        $img.click(function () {
                            $('#CategoriesTableContainer').jtable('openChildTable',
                                $img.closest('tr'),
                                {
                                    title: categoryData.record.CategoryName + ' - Pages',
                                    paging: true,
                                    redirect: true,
                                    pageSize: 12,
                                    gotoPageArea: 'none',
                                    pageSizeChangeArea: false,
                                    actions: {
                                        listAction:   '@Url.Action("ListPosts")?Id=' + categoryData.record.Id,
                                        deleteAction: '@Url.Action("Delete")'
                                    },

                                    fields: {
                                        Id: {
                                            key: true,
                                            create: false,
                                            edit: false,
                                            list: true,
                                            width: '5%'
                                        },
                                        Header: {
                                            title: 'Name',
                                            width: '70%'
                                        },
                                        Visible: {
                                            title: 'Status',
                                            width: '15%',
                                            options: { '1': 'Visible', '0': 'Invisble'}
                                        },
                                        Created: {
                                            type: 'date',
                                            displayFormat: 'dd.mm.yy',
                                            title: 'To Date',
                                            width: '10%'
                                        },
                                        Edit: {
                                            sorting: false,
                                            title: 'Edit',
                                            width: '1%',
                                            display: function (data) {
                                                return '<a href="@Url.Action("Edit","Blog")/' + data.record.Id + '">Edit</a>';
                                            }
                                        }
                                    }
                                }, function (data) {
                                    data.childTable.jtable('load');
                                });
                        });
                        return $img;
                    }
                },
                Picture: {
                    sorting: false,
                    title: 'Picture',
                    width: '1%',
                    display: function (data) {
                        return'<i class="icon-' + data.record.Picture + '"></i>';
                    }
                },
                CategoryName: {
                    title: 'Name',
                    width: '23%'
                },
                selectionChanged: function () {
                    var $selectedRows = $('#CategoriesTableContainer').jtable('selectedRows');

                    $('#SelectedRowList').empty();
                    if ($selectedRows.length > 0) {
                        $selectedRows.each(function () {
                            var record = $(this).data('record');
                            $('#SelectedRowList').append(
                                '<b>StudentId</b>: ' + record.StudentId +
                                '<br /><b>Name</b>:' + record.Name + '<br /><br />'
                                );
                        });
                    } else {
                        $('#SelectedRowList').append('No row selected! Select rows to see here...');
                    }
                },
                Edit: {
                    sorting: false,
                    title: 'Edit',
                    width: '1%',
                    display: function (data) {
                        return '<a href="@Url.Action("EditCategory")/' + data.record.Id + '">Edit</a>';
                    }
                }
            }
        });
        
        $('#CategoriesTableContainer').jtable('load');
        
        $('#DeleteAllButton').button().click(function () {
            var $selectedRows = $('#CategoriesTableContainer').jtable('selectedRows');
            $('#CategoriesTableContainer').jtable('deleteRows', $selectedRows);
        });
    });
</script>